<template>
  <div class="no-data-bg">
    <img :src="imgSrc" class="img" />
    <div>{{ text ? text : '--' }}</div>
  </div>
</template>
<script setup>
import { defineProps, computed } from 'vue';
const props = defineProps({
  title: {
    type: String,
    default: '暂无模板，请联系管理员'
  }
});
const text = computed(() => props.title);
const imgSrc = computed({
  get() {
    let src = '';
    switch (props.title) {
      case '暂无模板，请联系管理员':
        src = require('../../assets/images/missing_img_kong@2x.png');
        break;
      case '未搜索到相关内容，请重新尝试~':
        src = require('../../assets/images/missing_img_sousuo@2x.png');
        break;
      case '请先选择校区':
        src = require('../../assets/images/template_icon.png');
        break;
      default:
        src = '';
        break;
    }
    return src;
  }
});
</script>
<style lang="less" scoped>
.no-data-bg {
  margin-top: 156px;
  height: 174px;
  width: 100%;
  .img {
    display: block;
    margin: 0 auto;
    width: 154px;
    height: 154px;
  }
  div {
    height: 22px;
    font-size: 14px;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    text-align: center;
    color: rgba(0, 0, 0, 0.6);
    line-height: 22px;
  }
}
</style>
